<!DOCTYPE html>
<html>
<head>
    <title>PWA图标生成器</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        canvas { border: 1px solid #ccc; margin: 10px; }
        .icon-grid { display: flex; flex-wrap: wrap; gap: 10px; }
        .icon-item { text-align: center; }
        button { padding: 10px 20px; margin: 10px; background: #409EFF; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>RickPan PWA图标生成器</h1>
    <p>点击下面的按钮生成不同尺寸的PWA图标</p>
    
    <button onclick="generateIcons()">生成所有图标</button>
    <button onclick="downloadAll()">下载所有图标</button>
    
    <div class="icon-grid" id="iconGrid"></div>

    <script>
        const sizes = [
            { size: 192, name: 'pwa-192x192.png' },
            { size: 512, name: 'pwa-512x512.png' },
            { size: 180, name: 'apple-touch-icon.png' },
            { size: 32, name: 'favicon-32x32.png' },
            { size: 16, name: 'favicon-16x16.png' }
        ];

        function drawIcon(canvas, size) {
            const ctx = canvas.getContext('2d');
            const radius = size / 2;
            
            // 清空画布
            ctx.clearRect(0, 0, size, size);
            
            // 绘制背景圆形
            ctx.fillStyle = '#409EFF';
            ctx.beginPath();
            ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
            ctx.fill();
            
            // 绘制云朵图标
            ctx.fillStyle = 'white';
            const scale = size / 512; // 基于512px的缩放比例
            
            // 云朵路径（简化版）
            ctx.beginPath();
            ctx.arc(radius * 0.7, radius * 0.8, radius * 0.15, 0, 2 * Math.PI);
            ctx.arc(radius * 1.1, radius * 0.8, radius * 0.2, 0, 2 * Math.PI);
            ctx.arc(radius * 1.3, radius * 0.9, radius * 0.15, 0, 2 * Math.PI);
            ctx.fill();
            
            // 绘制文件夹图标
            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
            ctx.fillRect(radius * 0.6, radius * 0.4, radius * 0.8, radius * 0.6);
            ctx.fillRect(radius * 0.6, radius * 0.3, radius * 0.4, radius * 0.1);
            
            // 绘制文字（仅在大尺寸时）
            if (size >= 192) {
                ctx.fillStyle = 'white';
                ctx.font = `bold ${size * 0.08}px Arial`;
                ctx.textAlign = 'center';
                ctx.fillText('RickPan', radius, radius * 1.7);
            }
        }

        function generateIcons() {
            const grid = document.getElementById('iconGrid');
            grid.innerHTML = '';
            
            sizes.forEach(({ size, name }) => {
                const container = document.createElement('div');
                container.className = 'icon-item';
                
                const canvas = document.createElement('canvas');
                canvas.width = size;
                canvas.height = size;
                canvas.style.width = '100px';
                canvas.style.height = '100px';
                
                drawIcon(canvas, size);
                
                const label = document.createElement('div');
                label.textContent = `${name} (${size}x${size})`;
                
                const downloadBtn = document.createElement('button');
                downloadBtn.textContent = '下载';
                downloadBtn.onclick = () => downloadIcon(canvas, name);
                
                container.appendChild(canvas);
                container.appendChild(label);
                container.appendChild(downloadBtn);
                grid.appendChild(container);
            });
        }

        function downloadIcon(canvas, filename) {
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }

        function downloadAll() {
            const canvases = document.querySelectorAll('canvas');
            canvases.forEach((canvas, index) => {
                setTimeout(() => {
                    downloadIcon(canvas, sizes[index].name);
                }, index * 500); // 延迟下载避免浏览器阻止
            });
        }

        // 页面加载时自动生成图标
        window.onload = generateIcons;
    </script>
</body>
</html>
